<template>
  <el-container class="admin-layout">
    <!-- 侧边栏 -->
    <el-aside width="250px">
      <div class="logo">
        <h3>博客管理</h3>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="admin-menu"
        background-color="#001529"
        text-color="#fff"
        active-text-color="#1890ff"
        :router="true"
      >
        <el-menu-item index="/admin">
          <el-icon><House /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>
        
        <el-sub-menu index="articles">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>文章管理</span>
          </template>
          <el-menu-item index="/admin/articles">文章列表</el-menu-item>
          <el-menu-item index="/admin/articles/create">创建文章</el-menu-item>
        </el-sub-menu>
        
        <el-menu-item index="/admin/tests">
          <el-icon><Setting /></el-icon>
          <span>测试管理</span>
        </el-menu-item>
        
        <el-menu-item index="/admin/profile">
          <el-icon><User /></el-icon>
          <span>个人资料</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部导航 -->
      <el-header class="admin-header">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/admin' }">管理后台</el-breadcrumb-item>
            <el-breadcrumb-item v-if="breadcrumbItems.length > 0">
              {{ breadcrumbItems[breadcrumbItems.length - 1] }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <el-avatar :size="32" :src="authStore.user?.avatar">
                {{ authStore.user?.nickname || authStore.user?.username }}
              </el-avatar>
              <span class="username">{{ authStore.user?.nickname || authStore.user?.username }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                <el-dropdown-item command="home">返回首页</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main class="admin-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import {
  House,
  Document,
  Setting,
  User,
  ArrowDown
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

// 当前激活的菜单
const activeMenu = computed(() => route.path)

// 面包屑导航
const breadcrumbItems = ref<string[]>([])

// 路由到面包屑的映射
const routeToBreadcrumb: Record<string, string> = {
  '/admin': '仪表盘',
  '/admin/articles': '文章列表',
  '/admin/articles/create': '创建文章',
  '/admin/tests': '测试管理',
  '/admin/profile': '个人资料'
}

// 监听路由变化更新面包屑
watch(
  () => route.path,
  (newPath) => {
    const breadcrumb = routeToBreadcrumb[newPath]
    if (breadcrumb) {
      breadcrumbItems.value = [breadcrumb]
    } else if (newPath.includes('/edit')) {
      breadcrumbItems.value = ['编辑文章']
    } else {
      breadcrumbItems.value = []
    }
  },
  { immediate: true }
)

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/admin/profile')
      break
    case 'home':
      router.push('/')
      break
    case 'logout':
      authStore.logout()
      router.push('/')
      break
  }
}
</script>

<style lang="scss" scoped>
.admin-layout {
  height: 100vh;
}

.el-aside {
  .logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #002140;
    
    h3 {
      color: white;
      margin: 0;
      font-size: 18px;
    }
  }
  
  .admin-menu {
    border-right: none;
    height: calc(100vh - 60px);
    
    .el-menu-item,
    .el-sub-menu__title {
      height: 50px;
      line-height: 50px;
      
      .el-icon {
        margin-right: 8px;
      }
    }
  }
}

.admin-header {
  background: white;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  
  .header-left {
    .el-breadcrumb {
      font-size: 14px;
    }
  }
  
  .header-right {
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: #f5f5f5;
      }
      
      .username {
        margin: 0 8px;
        color: var(--text-primary);
      }
      
      .el-icon {
        color: var(--text-secondary);
      }
    }
  }
}

.admin-main {
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}
</style>
